<template>

    <div class="form">
        <van-field v-model="tel" type="tel" clearable label="手机" placeholder="请输入手机号" />
        <div class="my-button">
            <van-button type="danger" :disabled="flag" block @click="checkTel">下一步</van-button>
        </div>
    </div>

</template>
<script>
import Vue from 'vue';
import { Field, Button, Dialog } from 'vant';
import { doCheckPhone } from "@/utlis/user"

Vue.use(Dialog);
Vue.use(Button);
Vue.use(Field);

export default {
    data() {
        return {
            tel: ''
        }
    },
    methods:{

        checkTel() {
            // this.$router.push('/register/step2')
            // 进行数据请求，判断手机号是否存在
            doCheckPhone({ tel: this.tel })
                .then(res => {
                    // console.log(res);
                    if (res.data.code == '10005') {
                        // 该用户已经被注册
                        Dialog.confirm({
                            message: res.data.message,
                            confirmButtonText: '直接登录',
                            confirmButtonColor: '#f66',
                            cancelButtonText: '取消'
                        }).then(() => {
                            console.log('跳转到登录');
                            this.$router.push('/login')
                        }).catch(() => {

                        })
                    } else {
                        // 该用户不存在，可以进行注册
                        Dialog.confirm({
                            message: '我们将发送短信验证码到您的手机',
                            confirmButtonText: '确定',
                            confirmButtonColor: '#f66',
                            cancelButtonText: '取消'
                        }).then(() => {
                            console.log('跳转到step2');
                            this.$router.push('/register/step2')
                            // 将手机号存放到本地，因为另一个页面需要发送验证码
                            localStorage.setItem('tel', this.tel)
                        }).catch(() => {
                        })
                    }
                })
        }

    },
        computed: {
        flag() {
            // 如果手机号没问题就直接返回一个 true 否则 false
            if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)) {
                return false
            } else {
                return true
            }

        }
    }

}
</script>
<style>
.my-button {
    margin-top: 30px;
}
</style>